<template>
  <div>


    <el-menu
        :router="true"
        :default-active="$router.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="rgb(10, 0, 0)"
        text-color="#fff"
        active-text-color="white"

    >
      <!--      <div style="position:absolute;width: 5%;height: 100%;top: 0px">-->
      <!--        <img class="img_logo" src="../assets/tour2.png" alt="logo">-->
      <!--      </div>-->
      <el-menu-item index="/head/home" style="margin-left: 450px">首页</el-menu-item>

      <el-menu-item index="/head/video">视频Vlog</el-menu-item>

      <el-menu-item index="/head/strategy">旅游攻略</el-menu-item>

      <el-menu-item index="/ChatHome">路径规划</el-menu-item>

      <el-menu-item index="/head/center">个人中心</el-menu-item>
      、
      <div style="float: left;margin-top: 10px;width: 500px">
        <el-input
            placeholder="请输入内容"
            v-model="input"
            style="width: 200px;margin-left: 70px"
            clearable>
        </el-input>
        <el-button icon="el-icon-search" style="margin-left: 2px;"></el-button>

        <span style="color: white;margin-left: 50px; cursor: pointer;" @click="toLogin">登录</span>
        <el-divider direction="vertical"></el-divider>
        <span style="color: white;cursor: pointer;" @click="toRegister">注册</span>
      </div>
    </el-menu>


    <el-dialog

        :visible.sync="LoginVisible"
        width="10%"
        top="300px"
    >
      <body id="hposter" style="position: fixed;top: 100px;left: 0px">
      <el-form class="login-container" lable-position="left" label-width="0px">
        <h3 class="login_title">
          <span style="margin-right:20px">登录</span>
          <!--          <button @click="test">测试</button>-->
        </h3>
        <el-form-item label="">
          <el-input type="text" v-model="loginForm.userid" autocomplete="off" placeholder="账号"
                    style="width: 300px;margin-left: 23px">
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"
                    style="width: 300px;;margin-left: 23px"></el-input>
        </el-form-item>

        <el-form-item style="width:100%;;margin-left: 23px">
          <el-button type="primary" style="width: 300px;background:#505458;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;" v-on:click="login">登录
          </el-button>
          <el-button type="primary" style="margin-left: 0px;width: 300px;background:#505458;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;" v-on:click="loginback">退出
          </el-button>
        </el-form-item>

      </el-form>
      </body>


    </el-dialog>


    <el-dialog
        :visible.sync="RegisterVisible"
        width="10%"
        top="300px"
    >


      <div id="poster" style="position: fixed;left: 0px;top:50px">

        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="0px" lable-position="left"
                 class="register-container">
          <h3 class="register_title">
            系统注册
          </h3>
          <el-form-item label="" prop="loginName">
            <el-input type="text" style="width: 300px;margin-left: 23px" v-model="ruleForm.username"
                      placeholder="请输入账号" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-input type="text" style="width: 300px;margin-left: 23px" v-model="ruleForm.name"
                      placeholder="请输入网名" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password"
                      v-model="ruleForm.password"
                      autocomplete="off"
                      style="width: 300px;margin-left: 23px;"
                      prefix-icon="el-icon-lock"
                      placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认密码"
                      style="width: 300px;margin-left: 23px;" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="background:#505428;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;padding-left: 12px;margin-left: 23px;width: 300px"
                       @click="submitForm(ruleForm)">注册
            </el-button>
            <el-button type="primary" style="background:#505428;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;padding-left: 12px;margin-left: 23px;width: 300px" @click="RegisterBack">退出
            </el-button>

          </el-form-item>
        </el-form>
      </div>


    </el-dialog>
    <router-view></router-view>
  </div>
</template>

<script>

import Qs from "qs";

export default {
  data() {
    return {
      activeIndex: '1',
      input: '',
      LoginVisible: false,
      RegisterVisible: false,
      loginForm: {
        userid: '',
        password: ''
      },
      ruleForm: {}

    }
  },
  computed: {},
  created() {
    window.scrollTo(0, 0);
  },
  methods: {
    login() {
      this.$axios.post("http://localhost:9080/user/login", Qs.stringify(this.loginForm)).then(res => res.data).then(res => {
          if (res.userid!=0){
            this.$message.success("登录成功")
            localStorage.setItem('userid',this.loginForm.userid)
            localStorage.setItem('username',res.username)
            localStorage.setItem('sign',res.sign)
            this.LoginVisible=false
            location.reload()
          }
          else {
            this.$message.error("登录失败")
          }
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    toLogin() {
      this.LoginVisible = true
    },
    toRegister() {
      this.RegisterVisible = true
    },
    loginback() {
      this.LoginVisible = false
    },
    RegisterBack() {
      this.RegisterVisible = false
    }

  }


}
</script>

<style>
#hposter {
  background-position: center;
  height: 100%;
  width: 100%;
  /*border-style: cover;*/
  position: fixed;
  opacity: 1;
}

body {
  margin: 0px;
  padding: 0px;
}

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.login_title {
  margin: 8px auto 30px auto;
  text-align: center;
  color: #505458;
}
</style>